import React from 'react'
import {Card, Button, Spin, Icon, Alert} from 'antd'
import './ui.less'

export default class Loadings extends React.Component {

  render() {
    const icon = <Icon type="loading" style={{fontSize: 24}}/>
    const iconLoading = <Icon type="loading" style={{fontSize: 24}}/>

    return (
      <div style={{marginTop: 10}}>
        <Card title="Spin 用法" className="card-wrap">
          <Spin size="small" delay={1000}/>
          <Spin size="large"/>
          <Spin size="default "/>
          <Spin style={{margin: '0 10px'}}/>
          <Spin indicator={icon} style={{marginLeft: 10}} spinning={true}/>
        </Card>


        <Card title="Spin 内容遮罩" className="card-wrap">
          <Alert message="自定义图标" description="欢迎来到React高级实战课程" type="success" showIcon
                 icon={<Icon type="highlight"/>} style={{marginBottom: 10}}/>


          <Spin>
            <Alert message="React" description="欢迎来到React高级实战课程" type="info" style={{marginBottom: 10}}/>
          </Spin>

          <Spin tip="logining...">
            <Alert message="React" description="欢迎来到React高级实战课程" type="warning" style={{marginBottom: 10}}/>
          </Spin>
          <Spin indicator={iconLoading}>
            <Alert message="React" description="欢迎来到React高级实战课程" type="error"/>
          </Spin>
        </Card>
      </div>
    );
  }
}
